<template>
  <div class="purchase">
          <mt-header title="确认商品信息">
  <router-link to="/" slot="left">
    <mt-button icon="back"></mt-button>
  </router-link>
</mt-header>
    <div class="YourPosition">
       <img class="iocn1" src="../../img/AwardingMall/地址.png" alt="">
       <div class="wangxiaoer">
           <div>王小二 <span>15060950558</span></div>
           <div>福建省厦门市思明区软件园二期37号</div>
       </div>
       <img class="iocn2" src="../../img/AwardingMall/收货地址进入.png" alt="">
    </div>
     <div class="YourPosition">
       <img class="iocn1" src="../../img/AwardingMall/地址.png" alt="">
       <div class="wangxiaoer">
           <div style="line-height: 42px;">新建收货地址</div>
       </div>
       <img class="iocn2" src="../../img/AwardingMall/收货地址进入.png" alt="">
    </div>
    <div class="border"></div>
   <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="../../img/AwardingMall/收货地址进入.png">
            <div class="mui-media-body">
                <p class='mui-ellipsis'> XXXX越换了苹果XXXXXXXX越换了苹果XXXXXXXX越换了苹果XXXX </p>
                <p>数量:&nbsp;1</p>
            </div>
        </a>
    </li>
</ul>
<div class="sum">
   <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <div class="mui-media-body">
            合计金币:<span>750,250,35</span><img src="../../img/AwardingMall/确认信息金币.png" alt="">
            </div>
        </a>
    </li>
</ul>
</div >
<div class="padding" >
     <mt-button size="large" type="danger" @click="purchase" >确认支付金币</mt-button> 
</div>
        <div class="mint-msgbox-wrapper"  style="position: absolute; z-index:20001;display:none">
            <div class="mint-msgbox">
                <div style="height:150px;">
                    <div class="title">为了保障您账号的安全,请输入密码</div>
                    <div class="number">   
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                        <span>5</span>
                        <span>6</span>
                    </div>
                </div>
                <div class="background">
                    <div>
                        <span @click="nuber($event)">1</span>
                        <span  @click="nuber($event)">2</span>
                        <span style="
    margin-right: 3.3%;" @click="nuber($event)">3</span>
                    </div>
                    <div>
                        <span  @click="nuber($event)">4</span>
                        <span  @click="nuber($event)">5</span>
                        <span style="
    margin-right: 3.3%;" @click="nuber($event)">6</span>
                    </div>
                    <div>
                        <span  @click="nuber($event)">7</span>
                        <span  @click="nuber($event)">8</span>
                        <span  style="
    margin-right: 3.3%;"@click="nuber($event)">9</span>
                    </div>
                      <div>
                        <span>&nbsp;</span>
                        <span @click="nuber($event)">0</span>
                        <span style="
    margin-right: 3.3%;">箭头</span>
                    </div>
                </div>
            </div>
        </div>
       <div class="v-modal" style=z-index:2000;display:none @click="mod()"></div>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      state: "",
      is: 1
    };
  },
  created() {
 
  },
  methods: {
    purchase: function() {
       var mint=document.querySelector(".mint-msgbox-wrapper")
        var modal=document.querySelector(".v-modal")
      mint.style.display="block"
      modal.style.display="block"
    },
    nuber:function(e){
        console.log(e.target.innerHTML)
    },
    mod:function(){
         var mint=document.querySelector(".mint-msgbox-wrapper")
        var modal=document.querySelector(".v-modal")
      mint.style.display="none"
      modal.style.display="none"
    }
  }
};
</script>

<style lang="scss" scoped>
.mint-msgbox-wrapper {
  .mint-msgbox {
    .background {
      height: 300px;
      background: #e0e0e0;
       padding-top:10px; 
      div{
           padding-top:20px;
           display:flex;
           justify-content:center;
          span{
              display: inline-block;
              height:50px;
              width: 115px;
              text-align: center;
              background: #fff;
              line-height: 50px;
              margin-left:3.3%;
              font-size: 16px;
              color: #141414;
          }
      }
    }
    .title {
      color: #141414;
      padding: 20px 0;
      text-align: center;
      font-size: 16px;
    }
    .number {
      width: 91%;
      margin: 0 auto;
      line-height: 40px;
      border: 1px solid #e0e0e0;
          display: flex;
    justify-content: space-between;
      span {
        display: inline-block;
        border-left: 1px solid #e0e0e0;
        width: 15%;
        text-align: center;
      }
    }
  }
}
.purchase {
  background: #e0e0e0;
  .padding {
    padding: 30px 20px;
    background: #e0e0e0;
  }
  .mint-header {
    background: rgb(153, 9, 9);
  }
  .YourPosition {
    background: #fff;
    padding: 15px;
    .iocn1 {
      margin-right: 10px;
      vertical-align: top;
    }
    .wangxiaoer {
      display: inline-block;
    }
    .iocn2 {
      float: right;
      position: relative;
      top: 6px;
    }
  }
  .sum {
    .mui-table-view:after {
      height: 0px;
    }
    .mui-table-view {
      .mui-table-view-cell {
        .mui-media-object {
          margin-right: 20px;
        }
        .mui-media-body {
          float: right;
          font-size: 17px;
          span {
            color: #d51313;
          }
          img {
            margin-left: 5px;
            vertical-align: -webkit-baseline-middle;
            margin-top: -12px;
          }
        }
      }
    }
  }
  .mui-table-view {
    .mui-table-view-cell {
      .mui-media-object {
        margin-right: 20px;
      }
      .mui-media-body {
        p {
          font-size: 17px;
          color: #141414;
        }
      }
    }
  }
}
</style>    
